
import React, { Component, Fragment } from 'react'

import { USER_INFO } from '@/Utils/CONST'
import AuthComponent from '@/components/AuthComponent'

import Consortium from './Tabs/Consortium'
import Organization from './Tabs/Organization'

import './index.less'

@AuthComponent('fabric')
export default class Fabric extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userInfo: JSON.parse(localStorage.getItem(USER_INFO) || '{}'),
    }
  }

  render() {
    const { userInfo } = this.state
    const commonProps = {
      userInfo,
      container: this.fabricWrapper,
      ...this.props,
    }
    return (
      <div ref={elm => this.fabricWrapper = elm} className="fabric-wrapper">
        <div className="fabric-flow">
          <div className="flow-step flow-step-minWidth">
            <div>区块链网络构建流程：</div>
            <div className="step-right">
              {
                flowStepArr.map((item, index) => {
                  return (
                    <Fragment key={index}>
                      <div className="step-item">
                        <img className="step-img" style={{ width: item.iconW, height: item.iconH }} src={item.img} alt=""
                        />
                        <div className={item.noClick ? 'step-text step-no-click' : 'step-text'}
                        ><span className="step-number">{item.number}</span>{item.text}</div>
                      </div>
                      {
                        index !== flowStepArr.length - 1 &&
                        <div className="flow-step-arrow"> </div>
                      }
                    </Fragment>
                  )
                })
              }
            </div>
          </div>
        </div>
        <Consortium {...commonProps} />
        <Organization {...commonProps} />
        <div className="power">
          <div className="power-content">Powered by powerchain</div>
        </div>
      </div>
    )
  }
}

const flowStepArr = [
  {
    key: 'unify',
    img: require('@/images/fabric/2.svg'),
    number: '1.',
    text: '订购联盟实例',
    iconW: 40,
    iconH: 30,
    changeLink: true,
    bcsLink: '/dashboard/fabric/createLeague',
  },
  {
    key: 'members',
    img: require('@/images/fabric/3.svg'),
    number: '2.',
    text: '邀请成员',
    iconW: 30,
    iconH: 30,
    stateKey: '2',
  },
  {
    key: 'organization',
    img: require('@/images/fabric/1.svg'),
    number: '3.',
    text: '订购组织实例',
    iconW: 30,
    iconH: 30,
    changeLink: true,
    bcsLink: '/dashboard/fabric/createOrganization',
  },
  {
    key: 'channel',
    img: require('@/images/fabric/4.svg'),
    number: '4.',
    text: '创建通道',
    iconW: 30,
    iconH: 30,
    stateKey: '3',
  },
  {
    key: 'chaincode',
    img: require('@/images/fabric/5.svg'),
    number: '5.',
    text: '部署链码',
    iconW: 30,
    iconH: 30,
    stateKey: '4',
  },
  {
    key: 'chaincode',
    img: require('@/images/fabric/6.svg'),
    number: '6.',
    text: '链码调用',
    iconW: 30,
    iconH: 30,
    stateKey: '4',
    noClick: true,
  },
]

